<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../css/bootstrap.min.css" rel="stylesheet" />
		<style>
        body{
            padding: 30px;
        }
        #myCarousel{

        }
        h3,p{
            color: #000033;
        }
/*修改插件中的样式的，就是用自己定义的样式覆盖原来的样式*/
        .carousel-indicators li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 1px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #000 \9;
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid #CC3300;     /* 覆盖插件里圆圈的颜色 */
            border-radius: 10px
        }
        
        .carousel-indicators .active {
            width: 12px;
            height: 12px;
            margin: 0;
            background-color: #CC3300;     /* 覆盖插件里背景的颜色 */
        }

    </style>
	</head>
	<body>
		
		<!-- 图片容器 -->
		<div class="carousel-inner" >
			<div class="item active">
				<img src="../img/ylimg1.jpg" alt="...">
				<div class="carousel-caption ">
				</div>
			</div>
			<div class="item">
				<img src="../img/ylimg2.jpg" alt="...">
				<div class="carousel-caption">
					<h3>我的小尼克学堂</h3>
					 <p>来自美国的11项儿童能力培养方案，看中英文动画 培养儿童11项能力</p>
				</div>
			</div>

		</div>

		 <!--圆圈指示符-->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
		</ol>

		<!-- 左右控制按钮 -->
		<a class="left carousel-control" href="#myCarousel"  data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" ></span>
		</a>
		<a class="right carousel-control" href="#myCarousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
	<script src="../js/jquery-1.12.4.js"></script>
	<script src="../js/bootstrap.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script>
		//      $('.carousel').carousel();


	// 旋转轮播属性
		//两秒钟执行一次
	/*    $('.carousel').carousel({
			interval: 2000
		})*/
	   // 


	// 旋转轮播方法
	  /*  $('.carousel').carousel('next');*/


		// 旋转轮播事件
		$('#myCarousel').on('slid.bs.carousel', function () {
			alert('图片切换完后执行该事件')
		})

	</script>
	</body>
</html>
